<template>
    <div :style="{ display: isActive? 'block' : 'none' }" class="active">
      <div class="about">
        <h2>关于:</h2>
        <p>这个应用可以用来追踪你选择城市的当前天气</p>
        <br />
        <h2>如何使用:</h2>
        <p>
          1.点击搜索框输入你希望追踪的城市
          <br />
          2.在搜索结果中选中一个城市，你将获取当地最新的天气
          <br />
          3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
        </p>
        <br>
        <h2>移除城市:</h2>
        <p>
          如果你不想在首页关注某个城市,可以通过底部的按钮删除它
        </p>
        <br>
        <button @click="isActive = false">关闭</button>
      </div>
    </div>
</template>

<script setup>
import { useWeatherStore } from '@/strores/useWeatherStore'
import { storeToRefs } from 'pinia'
const { isActive } = storeToRefs(useWeatherStore())

</script>

<style scoped>
</style>
